<template>
    <div class="game-list" v-loading="loading">
        <div class="input-box">
            <el-input
                placeholder="请输入您要搜索的内容"
                @keyup.enter.native="getList(1)"
                style="width:200px;"
                clearable
                v-model.trim="keyword">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-select
                style="margin-left:10px;"
                v-model="publisher"
                filterable
                clearable
                @change="getList(1)"
                :loading="publisherLoading"
                :filter-method="filterMethod"
                placeholder="请输入并选择厂商">
                <el-option
                    v-for="item in publisherList"
                    :key="item.publisherid"
                    :label="item.name"
                    :value="item.publisherid">
                </el-option>
            </el-select>
            <el-button type="primary" class="btn" @click="getList(1)">搜索</el-button>
            <el-button type="success" class="btn" @click="goGameDetail(0)">新建</el-button>
        </div>

        <div class="input-selsect-box">
            <span class="select-title">游戏状态：</span>
            <el-select
                @change="getList(1)"
                style="width:100px;"
                v-model="status">
                <el-option label="全部" :value="-2"></el-option>
                <el-option label="可下载" :value="1"></el-option>
                <el-option label="不可下载" :value="0"></el-option>
                <el-option label="下架" :value="-1"></el-option>
            </el-select>

            <span class="select-title select-title-mr">审核状态：</span>
            <el-select
                style="width:100px;"
                @change="getList(1)"
                v-model="approveStatus">
                <el-option label="全部" :value="-1"></el-option>
                <el-option label="审核完成" :value="1"></el-option>
                <el-option label="待审核" :value="0"></el-option>
            </el-select>

            <span class="select-title select-title-mr">包类型：</span>
            <el-select
                v-model="pkgType"
                style="width:100px;"
                @change="getList(1)">
                <el-option label="全部" :value="-1"></el-option>
                <el-option label="主包" :value="0"></el-option>
                <el-option label="分包" :value="1"></el-option>
                <el-option label="雷同包" :value="2"></el-option>
            </el-select>

            <span class="select-title select-title-mr">游戏来源：</span>
            <el-select
                style="width:100px;"
                @change="getList(1)"
                v-model="source">
                <el-option label="全部" :value="-1"></el-option>
                <el-option label="客户" :value="2"></el-option>
                <el-option label="人工" :value="4"></el-option>
                <el-option label="taptap" :value="0"></el-option>
                <el-option label="应用宝" :value="1"></el-option>
                <el-option label="小米" :value="5"></el-option>
                <el-option label="学习识别" :value="3"></el-option>
            </el-select>
        </div>

        <div class="input-selsect-box">
            <span class="select-title">是否有宣传图：</span>
            <el-select
                style="width:100px;"
                v-model="hasCover"
                @change="getList(1)">
                <el-option label="全部" :value="-1"></el-option>
                <el-option label="没有" :value="0"></el-option>
                <el-option label="有" :value="1"></el-option>
            </el-select>

            <span class="select-title select-title-mr">是否有apk：</span>
            <el-select
                style="width:100px;"
                @change="getList(1)"
                v-model="hasApk">
                <el-option label="全部" :value="-1"></el-option>
                <el-option label="没有" :value="0"></el-option>
                <el-option label="有" :value="1"></el-option>
            </el-select>

            <span class="select-title select-title-mr">是否有banner：</span>
            <el-select
                style="width:100px;"
                @change="getList(1)"
                v-model="hasBanner">
                <el-option label="全部" :value="-1"></el-option>
                <el-option label="没有" :value="0"></el-option>
                <el-option label="有" :value="1"></el-option>
            </el-select>
            <span class="select-title select-title-mr">是否有视频：</span>
            <el-select
                v-model="hasVideo"
                style="width:100px;"
                @change="getList(1)">
                <el-option label="全部" :value="-1"></el-option>
                <el-option label="没有" :value="0"></el-option>
                <el-option label="有" :value="1"></el-option>
            </el-select>
        </div>

        <div class="input-selsect-box">
            <span class="select-title">是否有副标题：</span>
            <el-select
                style="width:100px;"
                v-model="hasTitle"
                @change="getList(1)">
                <el-option label="全部" :value="-1"></el-option>
                <el-option label="没有" :value="0"></el-option>
                <el-option label="有" :value="1"></el-option>
            </el-select>
        </div>

        <div class="table-box">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    fixed
                    prop="gameid"
                    label="id">
                </el-table-column>
                <el-table-column
                    prop="appIcon"
                    label="游戏icon">
                    <template slot-scope="scope">
                        <div class="app-icon">
                            <img :src="scope.row.appIcon" alt="">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="180"
                    label="游戏名称">
                    <template slot-scope="scope">
                        <span>{{scope.row.appName || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="address"
                    width="180"
                    label="宣传视频">
                    <template slot-scope="scope">
                        <videoBox v-if="scope.row.videoUrl" :url="scope.row.videoUrl" :img="scope.row.vidoeCover" :time="scope.row.videoDuration"/>
                        <div v-else>暂无宣传视频</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="appScore"
                    label="游戏评分">
                </el-table-column>
                <el-table-column
                    width="180"
                    label="游戏副标题">
                    <template slot-scope="scope">
                        <span>{{scope.row.appTitle || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="appCategoryName"
                    label="游戏类型">
                    <template slot-scope="scope">
                        <span>{{scope.row.appCategoryName || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    min-width="200"
                    prop="appCategoryName"
                    label="游戏标签">
                    <template slot-scope="scope">
                        <template v-if="scope.row.adminGameTagList && scope.row.adminGameTagList.length">
                            <span class="tags-item" v-for="(item, index) in scope.row.adminGameTagList" :key="index">{{item.tag}}</span>
                        </template>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="source"
                    label="游戏来源">
                    <template slot-scope="scope">
                        <span v-if="scope.row.source === 0">taptap</span>
                        <span v-else-if="scope.row.source === 1">应用宝</span>
                        <span v-else-if="scope.row.source === 2">客户</span>
                        <span v-else-if="scope.row.source === 3">学习识别</span>
                        <span v-else-if="scope.row.source === 4">人工</span>
                        <span v-else-if="scope.row.source === 5">小米</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="commentNum"
                    label="游戏点评数">
                </el-table-column>
                <el-table-column
                    prop="videoNum"
                    label="相关视频数">
                </el-table-column>
                <el-table-column
                    prop="downloadNum"
                    label="下载数">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="游戏状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status === 1" style="color: #67C23A;">可下载</div>
                        <div v-else-if="scope.row.status === 0" style="color:#909399;">不可下载</div>
                        <div v-else-if="scope.row.status === -1" style="color:#F56C6C;">下架</div>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="审核状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.approveStatus === 1" style="color: #67C23A;">审核完成</div>
                        <div v-else>待审核</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="110"
                    label="首次抓包时间">
                    <template slot-scope="scope">
                        {{scope.row.createTime | timeNo0}}
                    </template>
                </el-table-column>
                <el-table-column
                    width="110"
                    label="最近更新">
                    <template slot-scope="scope">
                        {{scope.row.updateApkTime | timeInit}}
                    </template>
                </el-table-column>
                <el-table-column
                    width="150"
                    label="关联游戏">
                    <template slot-scope="scope">
                        <!-- leader. 0主应用,1分身应用,2未知" -->
                        <div v-if="scope.row.leader === 0">主应用</div>
                        <div v-else-if="scope.row.leader === 1">
                            <div class="app-icon" v-if="scope.row.leaderIcon">
                                <img :src="scope.row.leaderIcon" alt="">
                            </div>
                            <div class="leader-btn" @click="goGameDetail(scope.row.leaderId)">{{scope.row.leaderName || '跳转至主游戏'}}</div>
                        </div>
                        <div v-else style="color: #F56C6C;">未知</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="address"
                    fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status !== 0"><el-button @click="changeGameStatus(scope.row, 0)" type="text" size="small">不可下载</el-button></div>
                        <div v-if="scope.row.status !== 1"><el-button @click="changeGameStatus(scope.row, 1)" type="text" size="small" style="color: #67C23A;">可下载</el-button></div>
                        <div v-if="scope.row.status !== -1"><el-button @click="delGame(scope.row)" style="color:red;" type="text" size="small">下架</el-button></div>
                        <div><el-button @click="goGameDetail(scope.row.gameid)" type="text" size="small">查看详情</el-button></div>
                        <div v-if="scope.row.leader === 0 && scope.row.hasSimilar === 1"><el-button @click="goGameDetail(scope.row.gameid, 'bottom')" type="text" size="small" style="color:#E6A23C;">查看分身</el-button></div>
                        <div v-else-if="scope.row.leader === 0"><el-button @click="goGameDetail(scope.row.gameid, 'bottom', 'same')" type="text" size="small" style="color:#909399;">添加分身</el-button></div>
                        <!-- <el-button type="text" size="small">下线</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="export-btn">
            <el-button type="primary" class="btn" @click="exportGameExcel">导出 {{total}} 条数据</el-button>
        </div>

        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
export default {
    data () {
        return {
            keyword: '',
            publisher: '',
            status: -2,
            hasBanner: -1,
            approveStatus: -1,
            hasCover: -1,
            hasVideo: -1,
            hasApk: -1,
            hasTitle: -1,
            source: -1, // 0 taptap,1 应用宝,2 客户,3 学习识别,4 人工, 5小米
            pkgType: 0,
            tableData: [],
            publisherLoading: false,
            publisherList: [],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            loading: false
        }
    },
    activated () {
        // 更好的缓存数据
        if (this.listParams) {
            this.keyword = this.listParams.keyword
            this.publisher = this.listParams.publisher
            this.publisherList = this.listParams.publisherList
        }
        this.getList(this.pageNum)
    },
    methods: {
        // 获取游戏列表
        async getList (pageNum) {
            if (this.loading) return
            this.pageNum = pageNum
            this.loading = true
            this.listParams = {
                pageIndex: pageNum,
                pageNum: this.pageSize
            }
            if (this.keyword) {
                this.listParams.keyword = this.keyword
            }
            if (this.publisher) {
                this.listParams.publisher = this.publisher
            }
            this.listParams.status = this.status >= -1 ? this.status : null
            this.listParams.approveStatus = this.approveStatus >= 0 ? this.approveStatus : null
            this.listParams.pkgType = this.pkgType >= 0 ? this.pkgType : null
            this.listParams.source = this.source >= 0 ? this.source : null
            this.listParams.hasCover = this.hasCover >= 0 ? this.hasCover : null
            this.listParams.hasApk = this.hasApk >= 0 ? this.hasApk : null
            this.listParams.hasBanner = this.hasBanner >= 0 ? this.hasBanner : null
            this.listParams.hasVideo = this.hasVideo >= 0 ? this.hasVideo : null
            this.listParams.hasTitle = this.hasTitle >= 0 ? this.hasTitle : null
            let res = await this.$http.post('/game/findGames', this.listParams)
            if (res.code === '0') {
                res.data.forEach(item => {
                    item.adminGameTagList = item.adminGameTagList || []
                })
                this.tableData = res.data
                this.total = res.count
                this.listParams.publisherList = this.publisherList
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },

        filterMethod (res) {
            clearTimeout(this.timerId)
            if (!res) {
                this.publisherLoading = false
                return
            }
            this.publisherLoading = true
            this.timerId = setTimeout(() => {
                this.getPublisherList(res)
            }, 1000)
        },

        async getPublisherList (keyword) {
            let params = {
                keyword
            }
            let res = await this.$http.post('/game/findPublisher', params)
            if (res.code === '0') {
                this.publisherList = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.publisherLoading = false
        },

        sizeChange (val) {
            this.pageSize = val
            this.getList(1)
        },
        pageChange (val) {
            this.pageNum = val
            this.getList(this.pageNum)
        },

        delGame (item) {
            this.$confirm(`删除游戏 ${item.appTitle} 此操作将不可恢复, 是否继续?`, '温馨提示', {
                confirmButtonText: '残忍删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.changeGameStatus(item, -1)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },

        async changeGameStatus (item, status) {
            let params = {
                id: item.gameid,
                status
            }
            let res = await this.$http.post('/game/updateGameStatus', params)
            if (res.code === '0') {
                item.status = status
                this.$message({
                    type: 'success',
                    message: '修改成功'
                })
                if (status === -1) {
                    this.getList(this.pageNum)
                }
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        goGameDetail (id, scroll, same) {
            if (id) {
                const { href } = this.$router.resolve({
                    path: '/game/gameDetail',
                    query: {
                        id,
                        scroll,
                        same
                    }
                })
                window.open(href, '_blank')
            } else {
                this.$router.push('/game/gameDetail')
            }
        },

        // 导出游戏数据
        exportGameExcel () {
            if (!this.total) {
                this.$message({
                    type: 'info',
                    message: '没有数据哦，不要导出'
                })
                return
            }
            let listParams = JSON.parse(JSON.stringify(this.listParams))
            listParams.keyword = this.keyword || null
            listParams.publisher = this.publisher || null
            let url = '/admin/game/exportGameExcel?'
            let params = ''
            for (let key in listParams) {
                if (key !== 'pageIndex' && key !== 'pageNum' & key !== 'publisherList') {
                    params += '&' + key + '=' + listParams[key]
                }
            }
            params = params.slice(1, params.length)
            window.location.href = url + params
        }
    },
    filters: {
        timeInit (val) {
            if (val) {
                return formatDate(val, 'YYYY-MM-DD HH:MM:SS')
            } else {
                return '-'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .game-list {
        .input-box {
            .btn {
                margin-left: 10px;
            }
        }

        .input-selsect-box {
            display: flex;
            align-items: center;
            margin-top: 10px;
            font-size: 12px;
            .select-title {
                width: 90px;
            }
            .select-title-mr {
                margin-left: 10px;
            }
        }

        .table-box {
            margin: 20px 0 10px;
            .app-icon {
                width: 60px;
                height: 60px;
                > img {
                    width: 100%;
                    height: 100%;
                }
            }
            .leader-btn {
                font-size: 12px;
                cursor: pointer;
                color: #409EFF;
            }
            .tags-item {
                font-size: 12px;
                margin-right: 3px;
            }
        }

        .export-btn {
            display: flex;
            justify-content: flex-end;
            padding-right: 20px;
            margin-bottom: 10px;
        }

        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
